<template>
  <div id="app">
    <el-dialog :title="psyTitleName" :visible.sync="centerDialogVisible" width="70%" center top="20px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input :readonly="opAndClose" v-model="psychology.pid">
            <template slot="prepend">档案号:</template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-input :readonly="opAndClose" v-model="psychology.cname">
            <template slot="prepend">姓名:</template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-input :readonly="opAndClose" v-model="psychology.cdate">
            <template slot="prepend">身份证号码:</template>
          </el-input>
        </el-col>
      </el-row>
      <span>
          <el-tabs type="border-card">
              <el-tab-pane v-for="item in conKnowList" :key="item.pid">
                  <span slot="label">{{ item.pname }}</span>
                  请根据最近一年的感觉，回答以下问题:
                  <div style="height: 20px;"></div>
                <span v-for="item1 in item.list" :key="item1.cid">
                  <el-row>
                      <el-col :span="24">
                          <div class="grid-content">{{ item1.cname }}</div>
                      </el-col>
                  </el-row>
                  <mentalButtonModule :class="item.pname"/>
                </span>
              </el-tab-pane>
          </el-tabs>
      </span>
      <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addPsy">确 定</el-button>
            </span>
    </el-dialog>
    <!-- <el-dialog title="已预约列表" :visible.sync="dialogVisible" width="90%" top="20px" :before-close="handleClose"
               center>
            <span>
                <el-container>
                    <el-main id="pageMain1"> <el-row :gutter="20">
                            <el-col :span="6">
                                <el-input placeholder="请输入身份证号码" v-model="theReservedObj"
                                          class="input-with-select"
                                          @keydown.13.native="toSwitch1">
                                    <el-button slot="append" icon="el-icon-search"
                                               @click.native="toSwitch1()"></el-button>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-table :data="reservedList" border style="width: 100%;">
                            <el-table-column prop="id" label="编号" align="center" width="60px">
                            </el-table-column>
                            <el-table-column prop="fileNumber" label="档案号" align="center" width="130px">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" align="center" width="60px">
                            </el-table-column>
                            <el-table-column prop="sex" label="性别" align="center">
                                <template v-slot="currentRow">
                                    <span v-if="(currentRow.row.sex == 0)">女</span>
                                    <span v-if="(currentRow.row.sex == 1)">男</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="idCard" label="身份证号码" align="center" width="200px">
                            </el-table-column>
                            <el-table-column prop="phoneNumber" label="电话号码" align="center">
                            </el-table-column>
                            <el-table-column prop="orderDate" label="预约时间" align="center" width="120px">
                            </el-table-column>
                            <el-table-column prop="orderType" label="预约类型" align="center">
                            </el-table-column>
                            <el-table-column prop="orderStatus" label="预约状态" align="center">
                            </el-table-column>
                            <el-table-column prop="id" label="操作" width="150px" align="center">
                                <template v-slot="data">
                                    <el-button type="primary" @click.native="startReview(data.row, data.row.id)"
                                               icon="el-icon-edit-outline">评测</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer>
                        <div class="block">
                            <el-pagination @size-change="1" @current-change="2"
                                           :current-page="3" :page-sizes="[5, 10, 15, 20]"
                                           :page-size="4"
                                           layout="total, sizes, prev, pager, next, jumper" :total="5">
                            </el-pagination>
                        </div>
                    </el-footer>
                </el-container>
            </span>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关&nbsp;闭</el-button>
            </span>
    </el-dialog> -->
    <el-container>
      <el-main id="pageMain">
        <el-row :gutter="20">
          <el-col :span="2">
            <el-button type="primary" @click="showAddDialog" icon="el-icon-circle-plus-outline">新增</el-button>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请输入身份证号码" v-model="searchObj" class="input-with-select"
                      @keydown.13.native="toSwitch">
              <el-button slot="append" type="primary" icon="el-icon-search" @click.native="toSwitch()"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="psySearch.rows" border style="width: 100%" align="center">
          <el-table-column prop="pid" label="档案号" align="center" width="130px">
          </el-table-column>
          <el-table-column prop="cname" label="姓名" align="center">
          </el-table-column>
          <!-- <el-table-column prop="sex" label="性别" v-if="false" align="center">
          </el-table-column> -->
          <el-table-column prop="cdate" label="心理评测日期" width="150px" align="center">
          </el-table-column>
          <el-table-column prop="qvti" label="躯体化" align="center">
            <template scope="data">
              <span v-if="data.row.qvti== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="qiangpo" label="强迫症化" align="center">
            <template scope="data">
              <span v-if="data.row.qiangpo== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="renjiguanximingan" label="人际关系敏感" align="center">
            <template scope="data">
              <span v-if="data.row.renjiguanximingan== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="youyv" label="犹豫" align="center">
            <template scope="data">
              <span v-if="data.row.youyv== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="jiaolv" label="焦虑" align="center">
            <template scope="data">
              <span v-if="data.row.jiaolv== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="didui" label="敌对" align="center">
            <template scope="data">
              <span v-if="data.row.didui== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="kongbu" label="恐怖" align="center">
            <template scope="data">
              <span v-if="data.row.kongbu== 0" style="color: #2ecc71">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="jingshenbing" label="精神病性" align="center">
            <template scope="data">
              <span v-if="data.row.jingshenbing== 0" style="color: #2ecc71;">否</span>
              <span v-else style="color: red">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="操作" width="130px" align="center">
            <template>
              <el-button type="warning" @click.native="1"
                         icon="el-icon-edit" circle></el-button>
              <el-button type="danger" @click.native="1"
                         icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="block">
          <el-pagination @size-change="handlePageSize" @current-change="handleCurrentPage"
                         :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </el-footer>
    </el-container>
    <el-alert :title="tips" :type="tipsType" :visible.sync="tipsStatus">
    </el-alert>
  </div>
</template>

<script>
import mentalButtonModule from "./mentalButtonModule.vue";
import $ from "jquery"
//引入组件
export default {
  components: {mentalButtonModule},//注册组件
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      searchObj: '',
      theReservedObj: '',
      reservedList: [],
      dialogVisible: false,
      centerDialogVisible: false,
      questionnaireList: [],
      submitTemp: 'addMentalTest',
      psySearch:{pageSize:5,currentPage:1,total:0,rows:[]},
      btuAddLoad:false,
      psyTitleName:'',
      psychology:{pid:'',cname:'',cdate:'',qvti:0,qiangpo:0,renjiguanximingan:0,youyv:0,jiaolv:0,didui:0,kongbu:0,pianzhi:0,jingshenbing:0},
      tips:'',
      tipsType:'',
      tipsStatus:false,
      conKnowList:{},
      opAndClose:false,
      sumAll:0,
    }
  },
  created () {
    this.queryPsyAll()
  },
  methods: {
      handlePageSize(val){
        this.psySearch.pageSize=val;
      },
      handleCurrentPage(val){
        this.psySearch.currentPage=val;
      },
      queryPsyAll(){
        this.axios.post("/api/queryPsychology",this.psySearch)
        .then(res => {
          this.psySearch=res.data
          // console.log(this.psySearch)
        })
        .catch(err => {
          console.error(err); 
        });
      },
      showAddDialog(){
        this.axios.post("/api/queryConKnowData")
        .then(res => {
          if(res.data!=null && res.data!=""){
            this.conKnowList=res.data;
            this.opAndClose=false;
            this.psyTitleName="添加心理评估";
            this.centerDialogVisible=true;
            this.psychology={};
          }
        })
        .catch(err => {
          console.error(err); 
        })
      },
      addPsy(){
        $.each(this.conKnowList,(i,w)=>{
            var sum1=0;
            $.each($("."+w.pname+" :checked"),(i1,w1)=>{
                sum1+=parseInt($(w1).val());
                console.log(sum1);
            })
        })
        
        // this.axios.post("/api/",this.psychology).then(res => {
        //   if(res.data>0){
        //     this.centerDialogVisible=false;
        //     this.tips="添加成功";
        //     this.tipsType="success";
        //     this.tipsStatus=true;
        //   }else{
        //     this.tips="添加失败";
        //     this.tipsType="error";
        //     this.tipsStatus=true;
        //   }
        // }).catch(err => {
        //   console.error(err); 
        // });
      },
      updatePsy(){

      }
  }
}
</script>

<style scoped>
.el-footer {
  text-align: center;
}

.grid-content {
  margin-left: 20px;
}

.el-radio {
  margin-left: 60px;
}

.el-row {
  margin-bottom: 6px;
}

#pageMain {
  height: 570px;
}

#pageMain1 {
  height: 400px;
}

* {
  letter-spacing: 1.5px;
}
</style>